<template>
  <div class="container" ref="mainCon">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <div class="listDetail">
        <p class="secondaryTitle secondaryTitleTheme">网点信息</p>
        <el-row class="listDetailInfo">
          <el-col :span="12">
            <span class="gridContent color333 fontSizeF fontWeight"
              >网点名称：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              detailInfo.name
            }}</span></el-col
          >
          <el-col :span="11" :offset="1"
            ><span class="gridContent color333 fontSizeF fontWeight"
              >网点电话：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              detailInfo.telNumber
            }}</span></el-col
          >
          <el-col :span="24"
            ><span class="gridContent color333 fontSizeF fontWeight"
              >网点地址：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              detailInfo.address
            }}</span></el-col
          >
          <el-col :span="12"
            ><span class="gridContent color333 fontSizeF fontWeight"
              >负责人：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              detailInfo.manager
            }}</span></el-col
          >
          <el-col :span="11" :offset="1"
            ><span class="gridContent color333 fontSizeF fontWeight"
              >联系电话：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              detailInfo.managerTel
            }}</span></el-col
          >
        </el-row>
      </div>
      <div class="spacing"></div>
      <div class="listDetail">
        <p class="secondaryTitle secondaryTitleTheme">专户清单</p>
        <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
          <el-form :inline="true" :model="filterField" ref="searchConditions">
            <el-col :lg="8" :xl="6">
              <el-form-item label="项目名称" class="row-padding-bottom">
                <el-input
                  v-model="filterField.projectName"
                  placeholder="请输入项目名称"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="专户账号" class="row-padding-bottom">
                <el-input
                  v-model="filterField.account"
                  placeholder="请输入专户账号"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <template v-if="advanced">
              <el-col :lg="8" :xl="6">
                <el-form-item label="是否签约" class="row-padding-bottom">
                  <el-select
                    placeholder="请选择"
                    clearable
                    v-model="filterField.signed"
                  >
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </template>
            <el-form-item>
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
              <!-- <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchList" class="commonBtn"></el-button> -->
            </el-form-item>
          </el-form>
        </el-row>
        <div class="spacing"></div>
        <div
          ref="tableBox"
          :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
        >
          <el-table
            ref="tableBox1"
            :max-height="tableHeight"
            :data="tableList"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            highlight-current-row
            stripe
            v-loading="loading"
            style="border: 1px solid #dfe6ec"
          >
            <el-table-column prop="projectName" label="项目名称" width="230">
              <template slot-scope="scope">
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row.projectName"
                  :columnName="'projectName'"
                ></copyText>
              </template>
            </el-table-column>
            <el-table-column prop="account" label="专户账号" width="230">
              <template slot-scope="scope">
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row.account"
                  :columnName="'account'"
                ></copyText>
              </template>
            </el-table-column>
            <el-table-column prop="signed" label="是否签约" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.signed == 1">是</span>
                <span v-else>否</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="balance"
              label="余额(万元)"
              align="center"
              :formatter="dateForma"
            ></el-table-column>
            <el-table-column label="操作" align="left" fixed="right">
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  v-if="scope.row.signed == 0"
                  @click="toUpdate(scope.row)"
                  >修改</el-link
                >
                <span v-else>--</span>
              </template>
            </el-table-column>
            <!-- 表格数据为空时，页面显示 -->
            <div slot="empty" v-show="isShow">
              <emptyTable emptyText="暂无相关信息"></emptyTable>
            </div>
          </el-table>
          <Pagination
            ref="pagination"
            @getList="getTableList"
            :filterField="filterField"
            :requestUrl="requestUrl"
          ></Pagination>
        </div>
        <el-dialog
          title="修改"
          :visible.sync="formVisible"
          :close-on-click-modal="false"
          @close="cancelEdit"
          custom-class="brand-dialog-min-width oneColumnDialog"
          width="640px"
          :modal-append-to-body="false"
        >
          <el-form
            :model="formData"
            :rules="formRules"
            ref="formData"
            label-width="120px"
          >
            <el-form-item label="项目名称：" class="wordWrapInput">
              <span class="projectNameInfo">{{ formData.projectName }}</span>
            </el-form-item>
            <el-form-item label="专户账号：" prop="account">
              <el-input
                class="inpWidth"
                v-model.trim="formData.account"
                placeholder="请输入专户账号"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="cancelEdit('formData')" class="cancel"
              >取消</el-button
            >
            <el-button
              type="primary"
              @click.native="saveInfo('formData')"
              class="save"
              :loading="isSaveLoading"
              v-sdc
              >保存</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'bankBranchDetail',
  data() {
    return {
      advanced: false,
      hiddleToolBar: false,
      tableHeight: null,
      back: true,
      titleText: '网点详情',
      bankSiteId: '',
      detailInfo: {},
      filterField: {
        bankSiteId: '',
        projectName: '',
        account: '',
        signed: '',
      },
      tableList: [],
      requestUrl: 'api-acc/account/expand/siteaccount',
      formData: {
        //修改弹框
        projectName: '',
        account: '',
      },
      formRules: {
        account: [
          {
            required: true,
            pattern: /^[^\u4e00-\u9fa5]{0,}$/,
            message: '请输入正确格式的账号',
            trigger: 'blur',
          },
        ],
      },
      isShow: false, //列表加载
      loading: true,
      formVisible: false,
      isSaveLoading: false,
    }
  },
  created() {
    this.filterField.bankSiteId = this.$route.query.bankSiteId
    this.getDetailInfo(this.filterField.bankSiteId)
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  activated() {
    window.addEventListener('scroll', this.handleScroll, true)
    this.$nextTick(function () {
      this.$refs.tableBox1.doLayout()
    })
  },
  deactivated() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  beforeDestroy() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
    let that = this
    this.$nextTick(function () {
      let tableHeightCur = this.$refs.tableBox1.$el.clientHeight
      let tableTop = this.$refs.tableBox.getBoundingClientRect().top
      if (tableHeightCur + tableTop > window.innerHeight) {
        this.tableHeight =
          this.$refs.mainCon.getBoundingClientRect().height - 290
      } else {
        document.getElementsByClassName('tableBoxCur').length &&
          (document.getElementsByClassName('tableBoxCur')[0].style.height =
            window.innerHeight - tableTop - 328 + 'px')
      }
      window.onresize = function () {
        if (!that.$refs.tableBox1) {
          return
        }
        let tableHeightCur = that.$refs.tableBox1.$el.clientHeight
        let tableTop = that.$refs.tableBox.getBoundingClientRect().top
        if (tableHeightCur + tableTop > window.innerHeight) {
          that.tableHeight =
            that.$refs.mainCon.getBoundingClientRect().height - 300
        } else {
          document.getElementsByClassName('tableBoxCur').length &&
            (document.getElementsByClassName('tableBoxCur')[0].style.height =
              window.innerHeight - tableTop - 40 + 'px')
        }
      }
    })
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    handleScroll(e) {
      this.$nextTick(function () {
        if (
          this.$refs.tableBox &&
          this.$refs.tableBox.getBoundingClientRect().top < 128
        ) {
          // this.tableHeight = this.$refs.mainCon.getBoundingClientRect().height - 84
          this.tableHeight = window.innerHeight - 232

          if (document.getElementsByClassName('tableBoxCur').length) {
            document.getElementsByClassName('tableBoxCur')[0].style.height =
              null
          }
          this.hiddleToolBar = true
        } else {
          this.hiddleToolBar = false
        }
      })
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    goBack() {
      this.$router.push({
        path: '/home/enShiCustomRequirements/bankBranchList',
        name: 'bankBranchList',
      })
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/enShiCustomRequirements/bankBranchList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getDetailInfo(bankSiteId) {
      this.axios
        .get('api-acc/accountbank/expand/detail', {
          params: { id: bankSiteId },
        })
        .then((res) => {
          if (!res.data.hasError) {
            this.detailInfo = res.data.result
          }
        })
        .catch((error) => {})
    },
    dateForma(row, column) {
      const daterc = row[column.property]
      if (daterc) {
        return this.toFixed(daterc, 2)
      } else {
        return '--'
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    //修改专户账号
    toUpdate(row) {
      this.formVisible = true
      this.formData = Object.assign({}, row)
    },
    cancelEdit() {
      this.formVisible = false
      this.$refs['formData'].resetFields()
    },
    saveInfo() {
      if (!this.formVisible) {
        return
      }
      this.isSaveLoading = true
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.saveEditInfo()
        } else {
          this.isSaveLoading = false
          return false
        }
      })
    },
    saveEditInfo() {
      this.axios({
        method: 'post',
        url: 'api-acc/account/expand/modifyAccount ',
        data: {
          id: this.formData.id,
          account: this.formData.account,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '保存成功',
            })
            this.$refs['formData'].resetFields()
            this.formVisible = false
            this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
          this.isSaveLoading = false
        })
        .catch((error) => {
          this.isSaveLoading = false
          this.$message.error('保存失败')
        })
    },
  },
}
</script>
<style lang="less" scoped>
.mainCon {
  padding: 0;
}

.secondaryTitle {
  margin: 24px;
}

.listDetail {
  // padding: 24px;
}

.listDetailInfo {
  color: #666;
  padding: 0 40px;
  .el-col {
    // height: 42px;
    // line-height: 42px;
    margin-bottom: 20px;
  }
}
.inpWidth {
  width: 340px;
}
@import '../../../static/css/filterArea.less';

.projectNameInfo {
  line-height: 20px;
  width: 394px;
  display: inline-block;
  margin-top: 8px;
}
</style>
